<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

        <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css">

    <script src="../lib/easyui/jquery.min.js"></script>
    <script src="../lib/easyui/jquery.easyui.min.js"></script>
    <script src="../lib/easyui/locale/easyui-lang-zh_CN.js"></script>

</head>
<body>
<table class="table table-striped table-bordered">
    <thead>
    <th>姓名</th>
    <th>年龄</th>
    <th>地址</th>
    <th>操作</th>
    </thead>
    <tbody>
    <tr id="data1">
        <td>张三</td>
        <td>21</td>
        <td>湖南</td>
        <td>
            <button id="btn_1" class="btn btn-primary">查看</button>
            <button id="but1" class="btn btn-primary">删除</button>
        </td>
    </tr>
    <tr id="data2">
        <td>张宁</td>
        <td>21</td>
        <td>湖南</td>
        <td>
            <button id="btn_2" class="btn btn-primary">查看</button>
            <button id="but2" class="btn btn-primary">删除</button>
        </td>
    </tr>
    <tr id="data3">
        <td>张双</td>
        <td>21</td>
        <td>湖南</td>
        <td>
            <button id="btn_3" class="btn btn-primary">查看</button>
            <button id="but3" class="btn btn-primary">删除</button>
        </td>
    </tr>
    </tbody>
</table>

<script>
    $(document).ready(function(){

        //显示信息
        $('button[id^="btn_"]').on('click',function(){
            var idno=$(this).attr('id')
            console.log(idno)
            idno=idno.slice(4)
            //根据id查询数据库
            var msg='查到了数据 id='+idno+'内容是。。。'
            $.messager.alert('',msg)
        })

        //隐藏信息
        $('button[id^="but"]').on('click',function(){
            var id=$(this).attr('id')
            id=id.slice(3)
            id="data"+id
            console.log(id)
            //$("tr[id="'+id+'"]").hide()
            $('tr[id="'+id+'"]').hide()
        })


    })

</script>
</body>
</html>